<template>
  <div class="maincontain">
    <div class="head">
      <div class="left">
        <span>区域搜索:</span>
        <el-input  placeholder="请输入内容" v-model="quyuContent"></el-input>
      </div>
     
      <div class="button">
         <el-button type="primary" icon="el-icon-search"  @click="searchArea">查询</el-button>
      </div>
    </div>
    <div class="body">
      <div class="top">
        <el-button type="primary" icon="el-icon-zoom-in" @click="xinjian(1)" >新建</el-button>
    
      </div>
      <div class="contain">
        
          <el-table
    :data="list"
    stripe
    style="width: 100%">
    <el-table-column
      type="index"
      label="序号"
      width="80">
    </el-table-column>
    <el-table-column
      prop="name"
      label="合作商名称"
     >
    </el-table-column>
    <el-table-column
      prop="account"
      label="账号">
    </el-table-column>
    <el-table-column
      prop="vmCount"
      label="设备数量">
    </el-table-column>
      <el-table-column
      prop="ratio"
      label="分成比例">
    </el-table-column>
      <el-table-column
      prop="contact"
      label="联系人">
    </el-table-column>
      <el-table-column
      prop="mobile"
      label="联系电话">
    </el-table-column>
    <el-table-column
      prop="address"
      label="操作">
       <template slot-scope="scope">
            
  <el-button @click="chongzhi(scope.row)" type="text" size="small">重置密码</el-button>

          
        <el-button @click="chakan(scope.row)" type="text" size="small">查看详情</el-button>
          <el-button @click="edmit(scope.row,0)" type="text" size="small">修改</el-button>
                   <el-popconfirm
  title="亲亲您确定要删除嘛~~~"
  @cancel="cancel"
  @confirm="dele(scope.row)"
>
 <el-button type="text" size="small"  slot="reference" class="shanshan">删除</el-button>

</el-popconfirm>
            
      </template>

    </el-table-column>
  </el-table>





          <div class="foot" v-if="isshow">

              <span>共{{totalCount}}条记录 第{{pageIndex}}/{{totalPage}}页</span>
                <el-button type="info"  @click="nextPage" :disabled = istrue>下一页</el-button>
                 <el-button type="info"  @click="beforePage" :disabled = istrue2>上一页</el-button>
          </div>
      </div>
    </div>
    <!-- 模态框 重置密码 -->
    <el-dialog
  title="提示"
  :visible.sync="dialogPassword"
  width="30%"
  center>
  <span>您确定要重置合作商密码嘛?</span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogPassword = false">取 消</el-button>
    <el-button type="primary" @click="chongzhi1">确 定</el-button>
  </span>
</el-dialog>
   <!-- 模态框 新增区域 -->
   <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
    <el-dialog
 :title="this.type? '新增合作商':'修改合作商'"
  :visible.sync="Visible"
  width="35%"
  >
   
 <el-form-item label="合作商名称:" prop="name">
     <el-input
  type="text"
  placeholder="请输入"
  v-model="ruleForm.name"
  maxlength="10"
  show-word-limit
/>
  </el-form-item>
 

  <el-form-item label="联系人:" prop="contact">
     <el-input
  type="text"
  placeholder="请输入"
  v-model="ruleForm.contact"
  maxlength="10"
  show-word-limit
/>
  </el-form-item>

 <el-form-item label="联系人电话:" prop="mobile">
     <el-input
  type="text"
  placeholder="请输入"
  v-model="ruleForm.mobile"
  maxlength="11"
  show-word-limit
/>
  </el-form-item>


 <el-form-item label="分成比例%:" prop="ratio">
    <el-input-number v-model="ruleForm.ratio" controls-position="right" @change="handleChange" :min="0" :max="100">

    </el-input-number>
  </el-form-item>

<el-form-item label="账号:" prop="account" v-if="type">
     <el-input
  type="text"
  placeholder="请输入"
  v-model="ruleForm.account"
  maxlength="18"
  show-word-limit
/>
  </el-form-item>


<el-form-item label="密码:" prop="password" v-if="type">
     <el-input
  type="text"
  placeholder="请输入"
  v-model="ruleForm.password"
  maxlength="20"
  show-word-limit
/>
  </el-form-item>




  <span slot="footer" class="dialog-footer">
    <el-button @click= cancel>取 消</el-button>
    <el-button type="primary" @click="addquyu">确 定</el-button>
  </span>
</el-dialog>
</el-form>
<!-- 模态框 查看详情 -->
        <el-dialog
  title="合作商详情"
  :visible.sync="DetailVisible"
  width="30%">
    <div class="top">
             <div class="left">
                 <span class="s1">合作商名称:</span>
                 <span class="s2">{{chakan1.name}}</span>
             </div>
             <div class="right">
                 <span class="s1">联系人:</span>
                 <span class="s2">{{chakan1.contact}}</span>
             </div>
    </div>
    <div class="bottom">

           <div class="left">
                 <span class="s1">联系电话:</span>
                 <span class="s2">{{chakan1.mobile}}</span>
             </div>
             <div class="right">
                 <span>分成比例:</span>
                 <span>{{chakan1.ratio}}%</span>
             </div>
    </div>
      
</el-dialog>

  </div>
</template>

<script>
import {gdDetails,gdType,gdxiang,gdcancel} from '@/api/auth'
import {hezuo,edmitHezuo,delhezuo,resetPassword,addHezuo,searchHezuo} from '@/api/quyu'
export default {
 async created(){
   const res = await hezuo(this.pageIndex)
   console.log(res);
   res.currentPageRecords.forEach(item=>{
        item.ratio= item.ratio+ '%'
   })
   this.list = res.currentPageRecords
   this.loading = false
 console.log(this.list);
 this.pageIndex =res.pageIndex
this.totalCount = res.totalCount
this.totalPage = res.totalPage
if(this.pageIndex === '1') {
   this.disabled = true
} 

  },

  data() {
    return {
      dialogPassword:false,
      num:'',
      list:[],
      type:0,
      passList:{},
      chakan1:{
        name:'',
        contact:'',
        mobile:'',
        ratio:''
      },
      AreaList: [{
          index: '1',
          name: '王小虎',
          num: '2'
        },
       ],
      isshow:true,
      totalCount:'',
      quyuContent:'',
      istrue:false,
      istrue2:false,
      pageIndex:1,
      pageSize:10,
      totalPage:'',
      DetailVisible:false,
      Areadetail:{
         regionId:'',
         pageIndex:'',
         pageSize:''
      },
      Visible:false,
      text:'',
      area:{
      minRows: 4
      },
       id:'',
       name:'',
      ruleForm:{
        account:'',
        contact:'',
        mobile:'',
        name:'',
        password:'',
        ratio:''
      },
      rules:{
        account:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
        contact:[
        {required:true,message:'请输入',trigger:'blur'}
        ],
         mobile:[
          {required:true,message:'请输入',trigger:'blur'},
         {
            pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: "手机号码格式不正确",
          },
        ],
         name:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
         password:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
         ratio:[
          {required:true,message:'请输入',trigger:'blur'}
        ],
      }
    }
  }, 
  methods:{
    async chakan(row){
      console.log(row);
     this.chakan1.name = row.name
     this.chakan1.contact = row.contact
      this.chakan1.mobile = row.mobile
      this.chakan1.ratio = row.ratio
       this.DetailVisible = true
     


     },
    async dele(row){
      try {
      this.delvisible = true
        await  delhezuo(row.id)
        const res1 = await hezuo(this.pageIndex)
   res1.currentPageRecords.forEach(item=>{
        item.ratio= item.ratio+ '%'
   })
   this.list = res1.currentPageRecords
       this.$message.success('删除成了哦~~')
      }catch(err){
        console.log(err);
        this.$message.error(err.response.data)
      }
    
     },
     cancel(){
         this.ruleForm ={
        regionName:'',
        remark:'',
      }
      this.$refs.ruleForm.resetFields()
      this.Visible = false
     },
   async  edmit(row,type){
      console.log(row);
       this.type = type
      this.Visible= true
      this.ruleForm.name = row.name
      this.ruleForm.contact = row.contact
        this.ruleForm.mobile = row.mobile
     this.ruleForm.ratio = parseInt(row.ratio)
      this.id = row.id
      this.name = row.name
      console.log(this.id);
    
     },
    xinjian(type){
      this.type = type
      this.Visible= true
      console.log(this.list);
    },
  async addquyu(){
    if(this.type){
      console.log(1);
         try {
   await this.$refs.ruleForm.validate()
   await addHezuo(this.ruleForm)
   this.$message.success('恭喜你添加成功!')
   this.Visible = false
   const res = await hezuo(this.pageIndex)
   console.log(res);
   res.currentPageRecords.forEach(item=>{
        item.ratio= item.ratio+ '%'
   })
   this.list = res.currentPageRecords
   console.log(this.list);
    this.$refs.ruleForm.resetFields()
    }catch(err){
      console.log(1);
      console.log(err);
      if(err.response.data ==='已存在此名称的对象'){
        console.log(err.response.data);
      this.$message.error(err.response.data)
      }
    }
    }else {
      console.log(1);
        if(this.ruleForm.name === this.name) {
         this.$message.error('合作商名称已存在')
         return
      }
      await edmitHezuo(this.id,this.ruleForm)
     const res = await hezuo(this.pageIndex)
   console.log(res);
   res.currentPageRecords.forEach(item=>{
        item.ratio= item.ratio+ '%'
   })
   this.list = res.currentPageRecords
       this.Visible = false
       this.$message.success('恭喜您编辑成功~~')
       this.ruleForm ={
       account:'',
        contact:'',
        mobile:'',
        name:'',
        password:'',
        ratio:''
      }
      this.$refs.ruleForm.resetFields()
       
    }
    }
    
     
    ,
   async nextPage(){
    if(this.pageIndex == this.totalPage) return
    this.pageIndex++
    console.log(this.pageIndex);
     const res = await hezuo(this.pageIndex)
   console.log(res);
   res.currentPageRecords.forEach(item=>{
        item.ratio= item.ratio+ '%'
   })
   this.list = res.currentPageRecords
    },
  async  beforePage(){
    if(this.pageIndex ==1) return
      this.pageIndex--
        const res = await hezuo(this.pageIndex)
   console.log(res);
   res.currentPageRecords.forEach(item=>{
        item.ratio= item.ratio+ '%'
   })
   this.list = res.currentPageRecords
       this.Visible = false
    },
   async searchArea(){
       console.log(this.quyuContent);
      const res = await searchHezuo(this.quyuContent,this.pageIndex)
      console.log(res);
      this.list = res.currentPageRecords
      console.log(this.list);
      this.pageIndex = res.pageIndex
      this.pageSize = res.pageSize
      this.totalCount =  res.totalCount
      this.totalPage = res.totalPage
      if(this.list.length ===0) {
        this.isshow = false
      }else this.isshow = true
    },
    handleChange(value){
      console.log(value);

    },
  async  chongzhi(row){
    this.dialogPassword = true
    console.log(row);
    this.passList = row
      
    },
    async chongzhi1(){
       const res = await resetPassword(this.passList.id)
        console.log(res);
        this.$message.success('重置密码成功!')
       this.dialogPassword = false
       
    }
  }
}
</script>

<style lang="scss" scpoed>
.head {
    display: flex;
    height: 60px;
    background-color: #ffffff;
    line-height: 60px;
    width: 100%;
    margin-bottom: 20px;
    .button {
      height: 60px;
      width: 80px;

 
    }
    .right {
      display: flex;
      margin-right: 5px;
      width: 320px;
      height: 60px;
    }
    .right span {
      width: 100px;
    }
    .left {
      margin-right: 8px;
      margin-left: 20px;
      display: flex;
      width: 500px;
      height: 60px;
      .el-input{
        width: 50%;
      }
      span {
        width: 100px;
      }
    }
  }
 ::v-deep .maincontain {
  position: absolute;
  background-color: pink;
  top: 80px;
  left: 150px;
  width: 90%;
  height: 1000px;
  
  .body {
    width: 100%;
    height: 600px;
    margin-top: 20px;
    background-color: #ffffff;
    .top {
      padding-left: 15px;
      width: 100%;
      height: 80px;
      line-height: 80px;
      background-color:#ffffff;
      .el-button--primary {
        background: linear-gradient(135deg,#ff9743,#ff5e20)!important;
        border: none;
        text-align: center;
      }
      .el-button--warning{
        background-color: #fbf4f0;
        color: #6b635e;
        border: none;
      }
   
      
    }
  }
}
 



     ::v-deep .el-table__header{
  background-color: green;
} 
.foot{
  padding-left: 40px;
  padding-right: 40px;
   height: 100px;
   line-height: 100px;
   width: 100%;
   background-color: #ffffff;
   span {
    color: #dbe5ef;
   }
   .el-button--info {
    float: right;
    background-color: black;
    border: none;
    color: black;
    margin-right: 130px;
    margin-top: 40px;
   }
}

.mid {
  padding: 20px;
  height: 300px;
  .bianhao{
    display: flex;
    margin-bottom: 10px;
    line-height: 40px;
  }
 .el-input {
  margin-left: 10px;
  width: 400px;
 }
}
.el-input__inner{
  width: 430px;
}
.qing {
  color: #5f84ff;
}
.el-icon-tickets{
    color: #5f84ff;
}
.pei {
  display: flex;
  line-height: 40px;
  span {
    width: 100px;
  }
  .el-input__inner{
    width: 100%;
   
  }
}
 .pei{
   position: relative;
   .right{
    width: 40px;
    height: 40px;
    .top{
      border: 1px solid #e1e5ea;
      text-align: center;
      line-height: 20px;
      height: 20px;
      background-color: #f8fafd;
    }
    .down{
      height: 20px;
      text-align: center;
      line-height: 20px;
       border: 1px solid #e1e5ea;
        background-color: #f8fafd;
    }
   }
 }

 .zhongjian {
  .mid {
    .mid1{
      display: flex;
      margin-bottom: 20px;
        .lfet{
          .s1{
            margin-right: 20px;
           }
        }
        .right{
        margin-left: 100px;
        }
    }
  }
     .top{
        height: 50px;
       line-height: 50px;
        background-color: #f8f8f8;
        width: 500px;
        margin: 0 auto;


        .tu{
          position: relative;
         
          line-height: 50px;
            .you {
              position: absolute;
              right: 10px;
               top: -15px;
              height: 50px;
            }
                 img {
          margin-top: 13px;
          margin-left: 15px;
          margin-right: 15px;
        }
        span {
          bottom: -50px;
          position: absolute;
        margin-bottom: 50px;
        }
        }
      
     }
 }
  
 
 ::v-deep .el-dialog__wrapper {


 
 .el-dialog__footer{
  text-align: center;
 }
 }
 .el-dialog {
      .quyu{
  display: flex;
  line-height: 40px;
  margin-bottom: 20px;
  .el-input {
    width: 80%;
    margin-left: 20px;
  }
 
 }

  .beizhu{
  display: flex;
  line-height: 40px;
  .el-input {
    width: 80%;
    margin-left: 20px;
  }
 }
  }
  .dianwei {
    display: flex;
    line-height: 40px;
    margin-top: 15px;
  .tablewraper{
    width: 369px;
    height: 40px;
    background-color: #f3f6fb;
    margin-left: 15px;
  }
  }
.cell{
  .shanshan{
    color: red;
    margin-left: 5px;
  }
}
  .el-form-item{
        .el-input-number {
       width: 100%;
  }
 }
 
 
.el-dialog__body {
  .top{
    display: flex;
    margin-bottom: 20px;
    ;
    .left{
     margin-left: 50px;
      margin-right: 150px;
     .s1 {
          margin-right: 20px;
      }
    }
  }

  .bottom {
    display: flex;
         .left{
     margin-left: 50px;
      margin-right: 135px;
     .s1 {
          margin-right: 20px;
      }
    }
  }
}
</style>
